Vue3 组件通信

<!-- Parent.vue 传送 -->
<template>
  <child :msg1="msg1" :msg2="msg2"></child>
</template>
<script>
import child from "./child.vue";
import { ref, reactive } from "vue";
export default {
  data() {
    return {
      msg1: "这是传级子组件的信息1",
    };
  },
  setup() {
    // 创建一个响应式数据

    // 写法一 适用于基础类型  ref 还有其他用处，下面章节有介绍
    const msg2 = ref("这是传级子组件的信息2");

    // 写法二 适用于复杂类型，如数组、对象
    const msg2 = reactive(["这是传级子组件的信息2"]);

    return {
      msg2,
    };
  },
};
</script>

<!-- Child.vue 接收 -->
<script>
export default {
  props: ["msg1", "msg2"], // 如果这行不写，下面就接收不到
  setup(props) {
    console.log(props); // { msg1:"这是传给子组件的信息1", msg2:"这是传给子组件的信息2" }
  },
};
</script>

<!-- Parent.vue 传输 -->
<template>
  <child :msg2="msg2"></child>
</template>
<script setup>
import child from "./child.vue";
import { ref, reactive } from "vue";
const msg2 = ref("这是传给子组件的信息2");
// 或者复杂类型
const msg2 = reactive(["这是传级子组件的信息2"]);
</script>

<!-- Child.vue 接收 -->
<script setup>
// 不需要引入 直接使用
// import { defineProps } from "vue"
const props = defineProps({
    // 写法一
    msg2: String
    // 写法二
    msg2: {
        type: String,
        default: ''
    }
});
// { msg2:"这是传级子组件的信息2" }
console.log(props)
</script>

<!-- Child.vue 派发 -->
<template>
    // 写法一
    <button @click="emit('myClick')">按钮</buttom>
    // 写法二
    <button @click="handleClick">按钮</buttom>
</template>
<script setup>
    // 方法一 适用于Vue3.2版本 不需要引入
    // import { defineEmits } from "vue"
    // 对应写法一
    const emit = defineEmits(["myClick","myClick2"]);
    // 对应写法二
    const handleClick = ()=>{
        emit("myClick", "这是发送给父组件的信息")
    };

    // 方法二 不适用于 Vue3.2版本，该版本 useContext()已废弃
    import { useContext } from "vue"
    const { emit } = useContext();
    const handleClick = ()=>{
        emit("myClick", "这是发送给父组件的信息")
    };
</script>

<!-- Parent.vue 响应 -->
<template>
    <child @myClick="onMyClick"></child>
</template>
<script setup>
    import child from "./child.vue"
    const onMyClick = (msg) => {
        // 这是父组件收到的信息
        console.log(msg)  
    };
</script>

<!-- Child.vue -->
<script setup>
// 方法一 不适用于Vue3.2版本，该版本 useContext()已废弃
import { useContext } from "vue";
const ctx = useContext();
// 对外暴露属性方法等都可以
ctx.expose({
  childName: "这是子组件的属性",
  someMethod() {
    console.log("这是子组件的方法");
  },
});

// 方法二 适用于Vue3.2版本, 不需要引入
// import { defineExpose } from "vue"
defineExpose({
  childName: "这是子组件的属性",
  someMethod() {
    console.log("这是子组件的方法");
  },
});
</script>

<!-- Parent.vue 注意 ref="comp" -->
<template>
  <child ref="comp"></child>
  <button @click="handlerClick">按钮</button>
</template>
<script setup>
import child from "./child.vue";
import { ref } from "vue";
const comp = ref(null);
const handlerClick = () => {
  console.log(comp.value.childName); // 获取子组件对外暴露的属性
  comp.value.someMethod(); // 调用子组件对外暴露的方法
};
</script>

<!-- Parent.vue 传送 -->
<child :msg1="msg1" :msg2="msg2" title="3333"></child>
<script setup>
import child from "./child.vue";
import { ref, reactive } from "vue";
const msg1 = ref("1111");
const msg2 = ref("2222");
</script>

<!-- Child.vue 接收 -->
<script setup>
import { defineProps, useContext, useAttrs } from "vue";
// 3.2版本不需要引入 defineProps，直接用
const props = defineProps({
  msg1: String,
});
// 方法一 不适用于 Vue3.2版本，该版本 useContext()已废弃
const ctx = useContext();
// 如果没有用 props 接收 msg1 的话就是 { msg1: "1111", msg2:"2222", title: "3333" }
console.log(ctx.attrs); // { msg2:"2222", title: "3333" }

// 方法二 适用于 Vue3.2版本
const attrs = useAttrs();
console.log(attrs); // { msg2:"2222", title: "3333" }
</script>

<!-- Parent.vue -->
<child v-model:key="key" v-model:value="value"></child>
<script setup>
import child from "./child.vue";
import { ref, reactive } from "vue";
const key = ref("1111");
const value = ref("2222");
</script>

<!-- Child.vue -->
<template>
  <button @click="handlerClick">按钮</button>
</template>
<script setup>
// 方法一  不适用于 Vue3.2版本，该版本 useContext()已废弃
import { useContext } from "vue";
const { emit } = useContext();

// 方法二 适用于 Vue3.2版本，不需要引入
// import { defineEmits } from "vue"
const emit = defineEmits(["key", "value"]);

// 用法
const handlerClick = () => {
  emit("update:key", "新的key");
  emit("update:value", "新的value");
};
</script>

<!-- Parent.vue -->
<script setup>
import { provide } from "vue";
provide("name", "沐华");
</script>

<!-- Child.vue -->
<script setup>
import { inject } from "vue";
const name = inject("name");
console.log(name); // 沐华
</script>

<!-- store/index.js -->
<script setup>
import { createStore } from "vuex";
export default createStore({
  state: { count: 1 },
  getters: {
    getCount: (state) => state.count,
  },
  mutations: {
    add(state) {
      state.count++;
    },
  },
});
</script>

<!-- main.js -->
<script setup>
import { createApp } from "vue";
import App from "./App.vue";
import store from "./store";
createApp(App)
  .use(store)
  .mount("#app");
</script>

<!-- Page.vue  方法一 直接使用 -->
<template>
  <div>{{ $store.state.count }}</div>
  <button @click="$store.commit('add')">按钮</button>
</template>

 <!-- 方法二 获取 -->
<script setup>
import { useStore, computed } from "vuex";
const store = useStore();
console.log(store.state.count); // 1

const count = computed(() => store.state.count); // 响应式，会随着vuex数据改变而改变
console.log(count); // 1
</script>

<!-- 组件 A -->
<script setup>
import mitt from "./mitt";
const handleClick = () => {
  mitt.emit("handleChange");
};
</script>

<!-- 组件 B -->
<script setup>
import mitt from './mitt';
import { onUnmounted } from 'vue';
const someMethed = () => { ... };
mitt.on('handleChange',someMethed);
onUnmounted(()=>{
    mitt.off('handleChange',someMethed)
});
</script>